<template>
    <div class="filte-cinema">
      <van-dropdown-menu>
        <van-dropdown-item :title="areaName" ref="item1">
          <van-tabs v-model="choose">
            <van-tab title="商区">
              <van-tree-select
                :items="items"
                :active-id.sync="activeId"
                :main-active-index.sync="activeIndex"
                @click-nav="clnav" @click-item="clitem"
              />
            </van-tab>
            <van-tab title="地铁站" :disabled="items2.length==0">
              <van-tree-select
                :items="items2"
                :active-id.sync="activeId"
                :main-active-index.sync="activeIndex"
                @click-nav="clnav" @click-item="clitem"
              />
            </van-tab>
          </van-tabs>
        </van-dropdown-item>

        <van-dropdown-item :title="brandName" v-model="value1" :options="option1" @change="changebrand"/>

        <van-dropdown-item :title="serName" ref="item3">
          <van-cell-group title="特色功能" :border="false">
            <ul class="service">
              <li v-for="item in service" :key="item.id" :class="[item.id==serviceId?'choose':'']" @click.stop="changeService(item.id)">
                {{item.name}}
              </li>
            </ul>
          </van-cell-group>
          <van-cell-group title="特殊厅" :border="false">
            <ul class="halltype">
              <li v-for="item in hallTypes" :key="item.id" :class="[item.id==hallType?'choose':'']" @click.stop="changeHalltype(item.id)">
                {{item.name}}
              </li>
            </ul>
          </van-cell-group>
          <div class="serBtn">
            <van-button type="default" size="large" round @click.stop="reset">
              重置
            </van-button>
            <van-button type="danger" size="large" round @click.stop="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
    data(){
        return{
            choose:0,
            activeId: -1,
            activeIndex: 0,
            active2Id: -1,
            active2Index: 0,
            items: [],
            items2: [],
            brand:[],
            districtId:-1,
            areaId:-1,
            disName:'',
            lineId:-1,
            stationId:-1,
            areaName:'全城',
            brandName:'品牌',
            value1: -1,
            option1: [],
            service:[],
            hallTypes:[],
            serName:"特色",
            // serIndex:0,
            // hallIndex:0,
            serviceId:-1,
            hallType:-1,
            date:'',
            cinemaPage:0,
            cinemaList:[],
            cinemaCount:0,
            isshow:false,
        }
    },
    created(){
        this.getfilterCinemas();
    },
    methods:{
        async getfilterCinemas(){
            let re=await this.axios.get('index/filterCinemas?ci='+this.cityid);
            this.brand=re.data.brand;
            this.service=re.data.service.subItems;
            this.hallTypes=re.data.hallType.subItems;
            re.data.district.subItems.forEach(item=>{
                let arr=[];
                item.subItems.forEach(ele=>{
                    arr.push({
                    text:ele.name+`(${ele.count})`,
                    id:ele.id,
                    area:ele.name
                    });
                });
                this.items.push(
                { text: `${item.name}(${item.count})`, children:arr,id:item.id,name:item.name}
                )
            });
            if(re.data.subway){
                re.data.subway.subItems.forEach(item=>{
                let arr=[];
                item.subItems.forEach(ele=>{
                    arr.push({
                        text:ele.name+`(${ele.count})`,
                        id:ele.id,
                        area:ele.name
                    });
                });
                this.items2.push(
                    { text: `${item.name}(${item.count})`, children:arr,id:item.id}
                )
                })
            }
            re.data.brand.subItems.forEach(item=>{
                this.option1.push({
                text:item.name+`(${item.count})`,
                value:item.id,
                name:item.name
                });
            });
        },
      clnav(index){
        this.districtId=this.items[index].id;
        this.lineId=-1;
        this.stationId=-1;
        this.active2Id=-1;
        this.active2Index=0;
        if(this.districtId==-1){
          this.areaName='全城';
          this.activeId=-1;
          this.areaId=-1;
          this.$refs.item1.toggle(false);
          this.cinemaList=[];
          // this.isload=true;
          // this.getmoreCinemas();
        }else{
          this.disName=this.items[index].name;
        }
        this.cinemaCount=this.items2[index].count;
      },
      clitem(data){
        this.areaId=data.id;
        if(this.areaId==-1){
          this.areaName=this.disName;
        }else{
          this.areaName=data.area;
          this.cinemaCount=data.count;
        }
        this.$refs.item1.toggle();
        this.cinemaList=[];
        // this.isload=true;
        // this.getmoreCinemas();
      },
      clnav2(index){
        this.activeId=-1;
        this.districtId=-1;
        this.areaId=-1;
        this.activeIndex=0;
        this.lineId=this.items2[index].id;
        if(this.lineId==-1){
          this.areaName='全城';
          this.active2Id=-1;
          this.stationId=-1;
          this.$refs.item1.toggle(false);
          this.cinemaList=[];
          this.isload=true;
          this.isload=true;
          this.getmoreCinemas();
        }else{
          this.disName=this.items2[index].name;
        }
        this.cinemaCount=this.items2[index].count;
      },
      clitem2(data){
        this.stationId=data.id;
        if(this.stationId==-1){
          this.areaName=this.disName;
        }else{
          this.areaName=data.area;
          this.cinemaCount=data.count;
        }
        this.$refs.item1.toggle();
        this.cinemaList=[];
        this.isload=true;
        this.getmoreCinemas();
      },
      changebrand(value){
        if(value==-1){
          this.brandName=this.brand.name;
          this.cinemaCount=this.brand.subItems[0].count;
        }else{
          this.brand.subItems.forEach(item=>{
            if(item.id===value){
              this.brandName=item.name;
              this.cinemaCount=item.count;
            }
          })
        }
        this.cinemaList=[];
        this.isload=true;
        this.getmoreCinemas();
      },
      changeService(id){
        this.serviceId=id;
        this.setTitle();
      },
      changeHalltype(id){
        this.hallType=id;
        this.setTitle();
      },
      setTitle(){
        if(this.serviceId==-1 && this.hallType==-1){
          this.serName='特色';
        }else if(this.serviceId!=-1 && this.hallType==-1){
          this.service.forEach(item=>{
            if(item.id==this.serviceId){
              this.serName=item.name;
            }
          })
        }else if(this.serviceId==-1 && this.hallType!=-1){
          this.hallTypes.forEach(item=>{
            if(item.id==this.hallType){
              this.serName=item.name;
            }
          })
        }else{
          let str='';
          this.service.forEach(item=>{
            if(item.id==this.serviceId){
              str=item.name;
            }
          });
          this.hallTypes.forEach(el=>{
            if(el.id==this.hallType){
              str=str+','+el.name;
            }
          });
          this.serName=str;
        }
      },
      reset(){
        this.serviceId=-1;
        this.hallType=-1;
        this.setTitle();
      },
      onConfirm(){
        this.$refs.item3.toggle();
        this.cinemaList=[];
        this.isload=true;
        this.getmoreCinemas();
      },
      scrollbar:_.throttle(function(){
        if(this.$refs.cinemabox){
          let el=document.documentElement||document.body;
          let top=el.scrollTop+el.clientHeight;
          let a=el.scrollTop;
          let b=el.clientHeight;
          if(a>b){
            this.isshow=true;
          }else{
            this.isshow=false;
          }
          let moretop=0;
          moretop=this.$refs.cinemabox.offsetHeight+this.$refs.cinemabox.offsetTop;
          if(top>=moretop+49){
            if(this.cinemaList.length<this.cinemaCount){
              this.isload=true;
              this.loadMore();
            }else{
              return;
            }
          }
        }else{
          return;
        }
      },300),
      loadMore(){
        this.cinemaPage++;
        // this.getmoreCinemas();
      },
    },
    computed:{
        ...mapState(['cityid']),
    }
}
</script>

<style lang="less" scoped>
.filte-cinema{
  overflow-x: hidden;

  .service,.halltype{
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 10px;

    li{
      line-height: 30px;
      width: 20%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 12px;
      text-align: center;
      color: #888;
      border: 1px solid #888;
      border-radius: 3px;
      margin: 10px 0 0 10px;

      &.choose{
        color: red;
        border-color: red;
        background-color: #fcf0f0;
      }
    }
  }

  .serBtn{
    display: flex;
    padding: 10px;
  }
}
</style>